<template>
    <div class="app-container">

        <el-row :gutter="20" class="header">

            <el-input v-model="queryForm.query.name" style="width: 240px;margin: 0 10px; margin-bottom: 10px" clearable>
                <template #prepend>名称：</template>
            </el-input>
            <el-input v-model="queryForm.query.company" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                clearable>
                <template #prepend>公司：</template>
            </el-input>
            <el-input v-model="queryForm.query.mphone" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                clearable>
                <template #prepend>公司座机：</template>
            </el-input>
            <el-input v-model="queryForm.query.owner" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                clearable>
                <template #prepend>所有者：</template>
            </el-input>
            <el-input v-model="queryForm.query.phone" style="width: 240px;margin: 0 10px; margin-bottom: 10px"
                clearable>
                <template #prepend>手机：</template>
            </el-input>
            <el-form-item label="线索来源" prop="source" style="width: 240px;margin: 0 10px; margin-bottom: 10px">
                <el-select v-model="queryForm.query.source" placeholder="线索来源" clearable size="large"
                    style="width: 240px">
                    <el-option v-for="item in sourceList" :key="item.id" :label="item.value" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="线索状态" prop="state" style="width: 240px;margin: 0 10px; margin-bottom: 10px">
                <el-select v-model="queryForm.query.state" placeholder="线索状态" clearable size="large"
                    style="width: 240px">
                    <el-option v-for="item in stateList" :key="item.id" :label="item.value" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-button type="primary" :icon="Search" @click="initClueList">查询</el-button>

            <el-button type="success" :icon="DocumentAdd" @click="handleDialogValue()">新增</el-button>
            <el-popconfirm title="您确定批量删除这些线索吗？" @confirm="handleDelete(null)">
                <template #reference>
                    <el-button type="danger" :disabled="delBtnStatus" :icon="Delete">批量删除</el-button>
                </template>
            </el-popconfirm>
        </el-row>

        <el-table v-if="tableData !== null" :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" @cell-click="handleCellClick" :cell-style="cellStyle">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="fullname" label="名称" align="center" />
            <el-table-column prop="company" label="公司" align="center" />
            <el-table-column prop="mphone" label="公司座机" align="center" />
            <el-table-column prop="phone" label="手机" align="center" />
            <el-table-column prop="source" label="广告线索" align="center" />
            <el-table-column prop="state" label="线索状态" align="center" />
            <el-table-column prop="owner" label="所有者" align="center" />
            <el-table-column prop="action" label="操作" width="200" fixed="right" align="center">
                <template v-slot="scope">
                    <el-button type="primary" :icon="Edit" @click="handleDialogValue(scope.row.id)" />
                    <el-popconfirm title="您确定要删除这条活动记录吗？" @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" />
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>


        <el-pagination v-model:currentPage="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
            :page-sizes="[2, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <clueFrom v-model="dialogVisible" :dialogVisible="dialogVisible" :id="clueId" :dialogTitle="dialogTitle"
        :sourceList="sourceList" :stateList="stateList" :ownerList="ownerList" :appellationList="appellationList"
        @initClueList="initClueList"></clueFrom>

    <clueDetail :id="clueId" v-model="detailVisible"  :dialogVisible="detailVisible" @changeConvert="changeConvert"></clueDetail>
    
    <convertClue :clueId="clueId" v-model="convertClueVisible"  :convertClueVisible="convertClueVisible" @initOptions="initOptions" />
</template>

<script setup>
import { ref } from 'vue';
import requestUtil, { getServerUrl } from "@/util/request";
import { ElMessage } from 'element-plus'
import { Search, Delete, DocumentAdd, Edit, Tools, Upload, Download } from '@element-plus/icons-vue'
import clueFrom from './components/clueFrom.vue';
import clueDetail from './components/clueDetail.vue';
import convertClue from "./components/convertClue.vue";
const queryForm = ref({
    query: {
        'name': '',
        'company': '',
        'source': '',
        'mphone': '',
        'owner': '',
        'phone': '',
        'state': ''
    },
    pageNum: 1,
    pageSize: 2
})

// 线索来源
const tableData = ref([])
const total = ref(0)

//表单数据
const clueId = ref("")
const dialogTitle = ref("")
const sourceList = ref([])
const stateList = ref([])
const ownerList = ref([])
const appellationList = ref([])
const dialogVisible = ref(false)
const convertClueVisible = ref(false)

//转换框
const changeConvert = (id)=>{
    clueId.value = id;
    convertClueVisible.value = true;
}

//点击跳转详情
const detailVisible = ref(false)
const handleCellClick = (row, column, cell, event) => {
    if (column.property === 'fullname') {
        clueId.value = row.id;
        detailVisible.value = true
    }
}
//设置样式
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.property === 'fullname') {
        return {
            color: '#428BCA',
            'text-decoration': 'underline',
            cursor: 'pointer',
        };
    }
    return {};
};


// 批量删除
const delBtnStatus = ref(true)
const multipleSelection = ref([])
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection;
  delBtnStatus.value = selection.length == 0;
}

//初始化数据
const initOptions = async () => {
    const res = await requestUtil.get('/crmClue/initClueOptions');
    stateList.value = res.data.data.clueStateList
    sourceList.value = res.data.data.sourceList
    ownerList.value = res.data.data.userList
    appellationList.value = res.data.data.appellationList
    initClueList()
}

initOptions()


// 分页查询
const handleSizeChange = (pageSize) => {
    queryForm.value.pageNum = 1;
    queryForm.value.pageSize = pageSize;
    initClueList();
}
// 改变事件
const handleCurrentChange = (pageNum) => {
    queryForm.value.pageNum = pageNum;
    initClueList();
}

const initClueList = async () => {
    const res = await requestUtil.post('/crmClue/pageList', queryForm.value);
    tableData.value = res.data.data.tlist
    total.value = res.data.data.total

}
//添加框
const handleDialogValue = (id) => {
    if (id) {
        clueId.value = id;
        dialogTitle.value = "线索修改"
    } else {
        clueId.value = "";
        dialogTitle.value = "线索添加"
    }
    dialogVisible.value = true
}
// 删除数据
const handleDelete = async (id) => {

    var ids = []
    if (id) {
        ids.push(id)
    } else {
        multipleSelection.value.forEach(row => {
            ids.push(row.id)
        })
    }
    const res = await requestUtil.post("crmClue/deleteClue", ids)
    if (res.data.code == 1) {
        ElMessage({
            type: 'success',
            message: '执行成功!'
        })
        initOptions();
    } else {
        ElMessage({
            type: 'error',
            message: res.data.message,
        })
    }

}

</script>

<style scoped></style>